import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import IconsResolver from 'unplugin-icons/resolver';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import Icons from 'unplugin-icons/vite';

export default defineConfig({
  plugins: [
    vue(),
    // 自动导入 Element Plus 相关函数（如 ElMessage）
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          // 启用图标自动导入
          importStyle: 'css',
          directives: true,
          // 图标相关配置
          // icons: true
        })
      ],
      imports: ['vue'], // 自动导入 Vue 相关函数（如 ref, reactive）
      dts: 'src/auto-imports.d.ts', // 生成类型声明文件
    }),
    // 自动按需导入 Element Plus 组件
    Components({
      resolvers: [
        ElementPlusResolver({
          // 确保图标解析启用
          importStyle: 'css',
          // icons: true,
        }),
        (name) => {
          console.log('解析', name);
          if (name.match(/^[A-Z][a-zA-Z]*$/)) {
            // 匹配大写开头的简单组件名
            return { name, from: `@element-plus/icons-vue` };
          }
          if (name.startsWith('Icon') && name[4].match(/[A-Z]/)) {
            return { name: name.slice(4), from: `@element-plus/icons-vue` };
          }
        },
      ],
      dts: 'src/components.d.ts', // 生成组件类型声明文件
    }),
    // 这是必须的插件，用于实际加载图标
    Icons({
      compiler: 'vue3',
      autoInstall: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
  },
});
